<template>
  <el-dialog
    title="选择优惠劵"
    :visible.sync="visible"
    width="60%"
    @close="currentRowId=''"
    @open="beforeOpen"
  >
    <el-form
      :inline="true"
      :model="form"
      label-width="70px"
      label-position="left"
      size="mini"
      class="demo-form-inline"
      style="padding-top: 18px;"
      @submit.native.prevent
    >
      <el-form-item label="批次ID">
        <el-input clearable v-model="form.couponsId" placeholder="批次ID" class="the-input"></el-input>
      </el-form-item>
      <el-form-item label="批次名称">
        <el-input clearable v-model="form.batchName" placeholder="批次名称" class="the-input"></el-input>
      </el-form-item>
      <el-form-item label="申请人">
        <el-input clearable v-model="form.applyName" placeholder="申请人" class="the-input"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit" type="primary" @click="doSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="singleTable"
      :data="couponList"
      style="width: 100%"
      border
      size="small"
      highlight-current-row
      @current-change="handleRowChange"
    >
      <el-table-column width="100" align="left" fixed>
        <template slot-scope="{row}">
          <el-radio v-model="currentRowId" :label="row.couponsId"></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="couponsId" label="批次ID" min-width="180"></el-table-column>
      <el-table-column prop="batchName" label="批次名称" min-width="180"></el-table-column>
      <el-table-column
        prop="providedType"
        label="发放方式"
        min-width="180"
        :formatter="providedTypeFormat"
      ></el-table-column>
      <el-table-column prop="stockNum" label="剩余数量" min-width="180"></el-table-column>
      <el-table-column label="有效期" min-width="280">
        <template slot-scope="{row}">
          <div>{{(row.startTime || '')+(row.startTime ? '-' : '')+(row.endTime || '')}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-area" style>
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 50]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="currentRowId='',currentRow = null ,visible = false">取 消</el-button>
      <el-button type="primary" @click="sureSelectCoupon">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { queryCouponList, queryCouponListByActivity } from "@/api/coupon";

export default {
  data() {
    return {
      totalCount: 0,
      form: {
        // 优惠券批次id
        couponsId: "",
        // 优惠券批次名称
        batchName: "",
        // 申请人
        applyName: "",
        pageSize: 10,
        pageIndex: 1,
        provider: "",
        state: "",
      },
      currentRowId: "",
      currentRow: null,
      visible: false, // 活动列表弹窗
      couponList: [],
    };
  },
  created() {
    this.doSearch();
  },
  methods: {
    beforeOpen() {
      this.doSearch();
    },
    providedTypeFormat(row, column, cellValue, index) {
      return cellValue === 0 ? "定向发放" : "直接领取";
    },
    doSearch() {
      // 加载活动列表
      // queryCouponList(this.form.pageIndex,this.form.pageSize,this.form).then(res => {
      //   const { result } = res
      //   if(result){
      //     this.couponList = result.records
      //     this.totalCount = result.total
      //   }
      // })
      queryCouponListByActivity(this.form.pageIndex, this.form.pageSize, {
        applyName: this.form.applyName,
        batchName: this.form.batchName,
        couponsId: this.form.id,
        providerType: 1,
      }).then((res) => {
        const { result } = res;
        if (result) {
          this.couponList = result.records;
          this.totalCount = result.total;
        }
      });
    },
    // close(){
    //    this.currentRowId = ''
    //    this.currentRow = null
    // },
    handleRowChange(row) {
      if (row) {
        this.currentRowId = row.couponsId;
        this.currentRow = row;
        this.$refs.singleTable.setCurrentRow(row);
      }
    },
    sureSelectCoupon() {
      this.$emit("select", this.currentRow);
      this.visible = false;
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.doSearch();
    },
    handleCurrentChange(val) {
      this.form.pageIndex = val;
      this.doSearch();
    },
  },
};
</script>
